<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>结果查看</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="../css/Lv_grad_point.css">
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/fontastic.css">
    <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
    <link rel="shortcut icon" href="../img/logo.ico">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header">
                        <a href="../index.html" class="navbar-brand d-none d-sm-inline-block">
                            <div class="brand-text d-none d-lg-inline-block"><strong>氨基酸数据库</strong></div>
                            <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>CATD</strong></div>
                        </a>
                        <a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
                    </div>
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item dropdown">
                            <a href="#" class="dropdown-toggle dropdown-user-link" data-toggle="dropdown">
                                <span class="dropdown-user-name">
                                    <i>你好，姓名</i>
                                </span>
                            </a>
                            <div class="dropdown-menu pull-right dropdown-menu-bigbox">
                                <div class="dropdown-menu-bigbox-top">
                                    <div id="user_name" class="dropdown-menu-bigbox-top-user-name">
                                        <span>姓名</span>
                                    </div>
                                </div>
                                <div class="row dropdown-menu-bigbox-bottom">
                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid" style="cursor: pointer" onclick="window.location.href='../web/changePwd.html';return false">
                                        <i class="fa fa-key dropdown-menu-bigbox-bottom-icon" style="font-size: 25px;line-height: 45px;color: #438eb9;"></i>
                                        <p class="dropdown-menu-bigbox-bottom-font">
                                            <span>密码修改</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="row dropdown-menu-bigbox-exit">
                                    <div class="dropdown-menu-bigbox-exit-font">
                                        <a href="login.html" class="nav-link logout"><span>退出登录</span><i class="fa fa-sign-out"></i></a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class=" d-flex align-items-stretch padding-top">
        <nav class="side-navbar" id="navbar">
            <ul class="list-unstyled">
                <li ><a href="../index.html"> <i class="icon-home"></i>首页 </a></li>
                <li><a href="addAminoAcid.html" > <i class="icon-grid"></i>氨基酸管理 </a>
                </li>

                <li><a href="#culAminoAcid" data-toggle="collapse" aria-expanded="false" aria-controls="culAminoAcid">
                    <i class="fa fa-bar-chart"></i>计算 </a>
                    <ul id="culAminoAcid" class="collapse list-unstyled">
                        <li><a href="culAminoAcid.html">氨基酸计算</a></li>
                        <li><a href="comparison.html">对比</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#culResult" data-toggle="collapse" aria-expanded="false" aria-controls="culResult">
                        <i class="fa fa-bar-chart"></i> 查看计算结果
                    </a>
                    <ul id="culResult" class="collapse list-unstyled show">
                        <li class="active"><a href="culResult.html">计算结果</a></li>
                        <li><a href="uploadData.html">上传的数据</a></li>
                        <li><a href="comparison.html">对比的数据</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div id="main-content" class="content-inner">
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="../index.html">首页</a></li>
                    <li class="breadcrumb-item"><a href="./culResult.html">计算结果</a></li>
                    <li class="breadcrumb-item active">单次计算结果</li>
                </ul>
            </div>
            <section class="client">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h3 class="h4">结果查看</h3>
                                    <ul class="nav nav-tabs ml-auto">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#tab1">公式一</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#tab2">公式二</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#tab3">公式三</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="card-body">

                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="tab1">
                                            <div class="table-responsive">
                                                <table class="table table-striped table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Content</th>
                                                        <th>Result</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="table1-body"></tbody>
                                                </table>
                                                <div id="pagination1"></div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="tab2">
                                            <div class="table-responsive">
                                                <table class="table table-striped table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Content</th>
                                                        <th>Result</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="table2-body"></tbody>
                                                </table>
                                                <div id="pagination2"></div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="tab3">
                                            <div class="table-responsive">
                                                <table class="table table-striped table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Content</th>
                                                        <th>Result</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="table3-body"></tbody>
                                                </table>
                                                <div id="pagination3"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>Copyright &copy; 2024. <a
                                    href="../index.html" target="_blank" title="CATD">ZWH</a></p>
                        </div>
                        <div class="col-sm-6 text-right">
                            <p></p>
                            <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>
<script>
    const pageSize = 50;

    document.addEventListener("DOMContentLoaded", function() {
        const urlParams = new URLSearchParams(window.location.search);
        const name = urlParams.get('name');

        loadTabData(1, "tab1", "公式一", 1, name);
        loadTabData(1, "tab2", "公式二", 2, name);
        loadTabData(1, "tab3", "公式三", 3, name);

        document.getElementById('uploadButton').addEventListener('click', promptUploadName);
    });

    function loadTabData(page, tabId, formula, tabNumber, name) {
        const validatedPage = page > 0 ? page : 1;

        $.ajax({
            url: `/amino/results`,
            method: "GET",
            data: {
                formula: formula,
                name: name,
                page: validatedPage,
                size: pageSize
            },
            success: function(data) {
                populateTable(data.content, tabId, tabNumber, validatedPage);
                setupPagination(data.totalPages, validatedPage, tabId, formula, tabNumber, name);
            },
            error: function(error) {
                console.error("Error fetching data:", error);
            }
        });
    }

    function populateTable(results, tabId, tabNumber, page) {
        const tbody = document.getElementById(`table${tabNumber}-body`);
        tbody.innerHTML = "";
        results.forEach((result, index) => {
            const row = document.createElement("tr");
            row.innerHTML = `
                <td>${(page - 1) * pageSize + index + 1}</td>
                <td>${result.content}</td>
                <td>${result.result.toFixed(4)}</td>
            `;
            tbody.appendChild(row);
        });
    }

    function setupPagination(totalPages, currentPage, tabId, formula, tabNumber, name) {
        const pagination = document.getElementById(`pagination${tabNumber}`);
        pagination.innerHTML = "";

        const ul = document.createElement('ul');
        ul.className = 'pagination justify-content-end';

        const prevLi = document.createElement('li');
        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
        prevLi.innerHTML = `<a class="page-link" href="#">Previous</a>`;
        prevLi.addEventListener('click', () => {
            if (currentPage > 1) loadTabData(currentPage - 1, tabId, formula, tabNumber, name);
        });
        ul.appendChild(prevLi);

        const createPageItem = (page) => {
            const li = document.createElement('li');
            li.className = `page-item ${page === currentPage ? 'active' : ''}`;
            li.innerHTML = `<a class="page-link" href="#">${page}</a>`;
            li.addEventListener('click', () => loadTabData(page, tabId, formula, tabNumber, name));
            return li;
        };

        if (totalPages <= 10) {
            for (let i = 1; i <= totalPages; i++) {
                ul.appendChild(createPageItem(i));
            }
        } else {
            ul.appendChild(createPageItem(1));
            ul.appendChild(createPageItem(2));

            if (currentPage > 5) {
                const li = document.createElement('li');
                li.className = 'page-item disabled';
                li.innerHTML = `<a class="page-link" href="#">...</a>`;
                ul.appendChild(li);
            }

            const start = Math.max(3, currentPage - 2);
            const end = Math.min(totalPages - 2, currentPage + 2);

            for (let i = start; i <= end; i++) {
                ul.appendChild(createPageItem(i));
            }

            if (currentPage < totalPages - 4) {
                const li = document.createElement('li');
                li.className = 'page-item disabled';
                li.innerHTML = `<a class="page-link" href="#">...</a>`;
                ul.appendChild(li);
            }

            ul.appendChild(createPageItem(totalPages - 1));
            ul.appendChild(createPageItem(totalPages));
        }

        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
        nextLi.innerHTML = `<a class="page-link" href="#">Next</a>`;
        nextLi.addEventListener('click', () => {
            if (currentPage < totalPages) loadTabData(currentPage + 1, tabId, formula, tabNumber, name);
        });
        ul.appendChild(nextLi);

        pagination.appendChild(ul);
    }





</script>
</body>
</html>
